<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import BannerCustom from './c-cpns/BannerCustom.vue'
import TabCate from './c-cpns/TabCate.vue'
import HospitalCard from './c-cpns/HospitalCard.vue'
import AsideItem from './c-cpns/AsideItem.vue'
import { useHomeStore } from '@/store/modules/home'

// import type { IHomeHospitalLevelArr } from '@/service/modules/home/type'
// 发送网络请求
const homeStore = useHomeStore()
// 医院级别
const { hospitalLevelArr, hospitalAreaArr, hospitalCardData } =
  storeToRefs(homeStore)

const levelTabRef = ref<InstanceType<typeof TabCate>>()
const areaTabRef = ref<InstanceType<typeof TabCate>>()
const currentPage = ref<number>(1)
const pageSize = ref<number>(3)
const hostype = ref<string>('')
const districtCode = ref<string>('')
const fecthHomeDataAll = () => {
  homeStore.fetchHospitalTabAllData()
  fecthHospitalPagination()
}
const fecthHospitalPagination = () => {
  homeStore.fetchHospitalCardListAction(
    currentPage.value,
    pageSize.value,
    hostype.value,
    districtCode.value
  )
}
onMounted(() => {
  fecthHomeDataAll()
})

const changeTabClickHandle = () => {
  hostype.value = levelTabRef.value?.currentVal as string
  districtCode.value = areaTabRef.value?.currentVal as string
  fecthHospitalPagination()
}

const handleSizeChange = () => {
  currentPage.value = 1
  fecthHospitalPagination()
}
const handleCurrentChange = () => {
  fecthHospitalPagination()
}
const $router = useRouter()
const goHospitalDetail = (item: any) => {
  $router.push({ path: '/hospital/register', query: { hoscode: item.hoscode } })
}
// aside 常用科室 新闻列表
const contentDepartment = [
  '神经内科',
  '消化内科',
  '呼吸内科',
  '内科',
  '神经外科',
  '妇科',
  '产科',
  '儿科'
]
const noticeMsg = [
  '关于延长北京大学国际医院放假的通知',
  '北京中医药大学东方医院部分科室医生门诊医',
  '武警总医院号源暂停更新通知'
]
const closeMsg = [
  '中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告',
  '首都医科大学附属北京潞河医院老年医学科门诊停诊公告',
  '中日友好医院中西医结合心内科门诊停诊公告'
]
</script>
<template>
  <div class="home">
    <div class="container">
      <!-- banner -->
      <div class="banner">
        <banner-custom></banner-custom>
      </div>
      <!-- search -->
      <div class="search">
        <search-box></search-box>
      </div>
      <!-- content -->
      <div class="content">
        <div class="left">
          <!-- tab -->
          <div class="tab">
            <!-- title -->
            <CustomTitleV1 title="医院"></CustomTitleV1>
            <!-- tab -->

            <tab-cate
              ref="levelTabRef"
              title="等级"
              :tabContentArr="hospitalLevelArr"
              @changeTabClick="changeTabClickHandle"
            ></tab-cate>
            <tab-cate
              ref="areaTabRef"
              title="地区"
              :tabContentArr="hospitalAreaArr"
              @changeTabClick="changeTabClickHandle"
            ></tab-cate>
          </div>
          <!-- card -->
          <div class="hospital-list">
            <el-row :gutter="20" style="margin: 0; padding: 0">
              <template v-if="hospitalCardData?.content">
                <el-col
                  class="item"
                  :span="12"
                  v-for="item in hospitalCardData?.content"
                  :key="item.id"
                >
                  <hospital-card
                    :itemData="item"
                    @click="goHospitalDetail(item)"
                  ></hospital-card>
                </el-col>
              </template>
              <template else-if>
                <el-empty description="暂无数据" />
              </template>
            </el-row>
          </div>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[3, 5, 7]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="hospitalCardData?.totalElements"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </div>
        <div class="right">
          <AsideItem title="常见科室" :is-icon="false">
            <template #ContentList>
              <div class="content-list">
                <el-text
                  class="list-item"
                  v-for="item in contentDepartment"
                  :key="item"
                >
                  {{ item }}
                </el-text>
              </div>
            </template>
          </AsideItem>
          <AsideItem title="平台公告" :contentArr="noticeMsg">
            <template #titleIcon>
              <icon-titlev1></icon-titlev1>
            </template>
          </AsideItem>
          <AsideItem
            title="停诊公告"
            :contentArr="closeMsg"
            pointColor="#ffaa51"
          >
            <template #titleIcon>
              <icon-titlev2></icon-titlev2>
            </template>
          </AsideItem>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.home {
  .banner {
    width: 100%;
    height: 350px;
  }

  .search {
    width: 800px;
    margin: 25px auto;
  }

  .content {
    display: flex;
    justify-content: space-between;

    .left {
      flex: 1;
      padding-right: 60px;
      .hospital-list {
        margin: 20px 0;
        width: 100%;
        padding-right: 30px;
        box-sizing: border-box;

        .item {
          margin: 10px 0;
        }
      }
      .pagination {
        width: 100%;
        margin: 20px 0;
      }
    }

    .right {
      width: 200px;
      margin: 20px 0;

      .content-list {
        display: flex;
        flex-wrap: wrap;

        .list-item {
          width: 50%;
          line-height: 30px;
          cursor: pointer;
          text-align: center;
          color: #333;
          &:hover {
            color: var(--text-hover-color);
          }
        }
      }
    }
  }
}
</style>
